<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Napi</title>
</head>
<style type="text/css">
    body {
        background-color: var(--vscode-editor-background, #000000);
        margin:0 auto;
        font-family: "Microsoft YaHei";
        opacity: 0.9;
    }
    a  {
        text-decoration: none;
    }

    button.button {
        background-color: #ffffff;
        font-family: Consolas, sans-serif;
        font-size: 16px;
        border-radius: 3px;
        border-color: #C4C4C4;
        align-self: center;
        border: 1px solid #C4C4C4;
        outline: none;
        width: 100px; 
        height:24px
    }

    input.text {
        width: 250px; 
        vertical-align:middle;

        background-color: var(--vscode-editor-background, #000000);
        color: var(--vscode-editor-foreground, #ffffff);
        border-radius: 6px;
        border: 1px solid #555555;
        opacity: 0.9;
        height: 24px;
    }
    input.text:hover {
        outline: none;
        border-color: var(--vscode-focusBorder, #272727);
    }

    .tabs{
        position: relative;
        height: 800px;
        min-height: 800px;
        max-height: 800px;
        clear: both;
        margin: 25px 0;
        overflow: hidden;
    }
    .tab{
        float: left;
        margin: 25px 0;
    }
    .tab label{
        background: #eee;
        padding: 10px 20px;
        position: relative;
        left: 1px;
        border: 0px solid;
        margin-left: -1px;
        z-index: 2;
        color: #333333;
        background: white;
    }

    [type=radio]:checked ~ label{
        color: white;
        background: #3288e9;
        border: 0px solid #ccc;
        z-index: 3;
    }
    [type=radio]:checked ~ label ~ .content{
        z-index: 1;
    }
</style>
<script type="text/javascript">
    var mode = 0;
    let vscode = acquireVsCodeApi();

    function sendParamMsg() {
        var fileNames = document.getElementById("hFilePath").value;
        var genDir = document.getElementById("genHResultDir").value;
        var serviceId = document.getElementById("serviceID").value;
        var buttonName = document.getElementById("okButton").textContent;
        var result = {
            msg: "param",
            fileNames: fileNames,
            genDir: genDir,
            serviceId: serviceId,
            buttonName: buttonName,
        }
        vscode.postMessage(result);
    }
    function selectHFilePath() {
        var fileNames = document.getElementById("hFilePath").value;
        var result = {
            msg: "selectHFilePath",
            mode: mode,
            filePath: fileNames
        }
        vscode.postMessage(result);
    }

    function selectPath(message) {
        var genDir = document.getElementById("genHResultDir").value;
        var result = {
            msg: message,
            filePath: genDir
        }
        vscode.postMessage(result);
    }

    function cancel() {
        var result = {
            msg: "cancel"
        }
        vscode.postMessage(result);
    }

    window.addEventListener('message', event => {
        const message = event.data.msg;
        const path = event.data.path;
        if(message == "selectHFilePath") {
            document.getElementById("hFilePath").value = path;
            fillInputDir(path);
        } else if(message == "selectHResultDir") {
            document.getElementById("genHResultDir").value = path;
        } else if (message == "colorThemeChanged") {
            reloadFileImgPic();
        }
        else {
            console.log("param is error");
        }
    })

    function inputChange() {
        var fileNames = document.getElementById("hFilePath").value; //interfaceFile
        fillInputDir(fileNames);
    }

    function fillInputDir(fileNames) {
        var dir;
        var fileName;
        if (mode == 0) {
            if (fileNames.indexOf(",") != -1) {
                fileName = fileNames.substring(0, fileNames.indexOf(","));
            } else {
                fileName = fileNames;
            }
            if (fileName.lastIndexOf("/") != -1) {
                dir = fileName.substring(0, fileName.lastIndexOf("/"));  
            } else {
                dir = fileName.substring(0, fileName.lastIndexOf("\\")); 
            }
        } 
        else {
            dir = fileNames;
        }
        document.getElementById("genHResultDir").value = dir;
    }

    function onInput(event) {
        var value = event.target.value;
        checkServiceId(value);
    }
    
    function checkServiceId(value) {
        if (value<1 || value>16777215) {
            document.getElementById("error").style.display="";
            document.getElementById("error").innerHTML="serviceID范围错误, 请输入0-16777215之间的数字"
        } else {
            document.getElementById("error").style.display="none";
            document.getElementById("error").innerHTML="";
        }
    }
    
    function isDarkColor(colorArr) {
        let grayLevel = colorArr[0] * 0.299 + colorArr[1] * 0.587 + colorArr[2] * 0.114;
        return grayLevel < 192;
    }

    function reloadFileImgPic() {
        var bodyobj = document.getElementsByTagName("body")[0];
        var bgStyle = document.defaultView.getComputedStyle(bodyobj, null);  
        var bgColor = bgStyle.getPropertyValue("background-color").match(/\d{1,3}/g); 
        var isDarkBackground = true;
        if (bgColor) { 
            isDarkBackground = isDarkColor(bgColor);
        }

        var fileImgPng = isDarkBackground ? "file.png" : "file_black.png"
        var currentFileImgPath = document.getElementById("hFilePathImg").src;
        var fileImgPath = currentFileImgPath.substr(0, currentFileImgPath.lastIndexOf("/") + 1);
        fileImgPath += fileImgPng;
        document.getElementById("hFilePathImg").src = fileImgPath;
        document.getElementById("genHResultDirImg").src = fileImgPath;
    }
</script>

<body>
    <div class="tabs">
        <div class="tab">
            <input type="radio" style="display: none;" id="tab2" name="group-1">
            <label for="tab2">Gen-Service</label>
            <div class="content">
                <table style="border-spacing:0px 5px; margin-left: 20px; margin-top: 38px; width: 500px;">
                    <tr>
                        <td width="110px">.h文件选择*:</td>
                        <td width="340px">
                            <input class="text" type="text" id="hFilePath" onchange="inputChange()" onporpertychange="inputChange() ">
                            <img id="hFilePathImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;"
                                onclick="selectHFilePath()">
                        </td>
                    </tr>

                    <tr>
                        <td>输出路径选择:</td>
                        <td>
                            <input class="text" accept="text" id="genHResultDir">
                            <img id="genHResultDirImg" src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;"
                                onclick="selectPath('selectHResultDir')">
                        </td>
                    </tr>

                    <tr>
                        <td>serviceID:</td>
                        <td>
                            <input class="text" type="number" id="serviceID" placeholder="1-16777215" oninput="onInput(event)" onpropertychange="onInput(event)"/>
                            <a href="" target="_blank" title="Please refer to system_ability_definition.h&#10;(OpenHarmony source code),&#10;and do not use the occupied serviceID.">
                                <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
                            </a>
                          
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <span id="error" style="color:red; display: none; background-color: transparent;"></span>
                        </td>
                    </tr>
            
                    <tr>
                        <td colspan="2">
                            <button type="button" class="button" onclick="cancel()"
                                style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button>
                            <button id="okButton" type="button" class="button" onclick="sendParamMsg()"
                                style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button>
                            <a href="https://gitee.com/openharmony/napi_generator" target="_blank">
                                <button type="button"
                                   style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    reloadFileImgPic();
</script>